<template>
  <div class="msg">
    <span class="msgImg"></span>
    <div class="msgInfo">
      <p class="msgText">你的订单已生成</p>
      <p class="msgTime">2018-07-10</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'msgCenter'
  }
</script>

<style scoped>
  .msg{
    width: 690rpx;
    height: 80rpx;
    padding: 38rpx 30rpx 43rpx 30rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    margin: 20rpx 0;
  }
  .msgImg{
    width: 51rpx;
    height: 54rpx;
    background: url("~static/img/msg-order.png") no-repeat center/cover;
    display: inline-block;
  }
  .msgInfo{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 50rpx;
    height:100%;
  }
  .msgText{
    font-size: 28rpx;
  }
  .msgTime{
    font-size: 22rpx;
    color: #d4d4d4;
  }
  .msg:nth-child(1){
    margin: 30rpx 0 10rpx 0;
  }
</style>
